<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@import url(https://fonts.googleapis.com/css?family=Lato);
			body {
			  display: flex;
			  height: 100vh;
			  justify-content: center;
			  align-items: center;
			  background: black;
			}
			
			abbr {
			  display: flex;
			  color: white;
			  font-size: 2em;
			  font-weight: bold;
			  font-family: Lato, sans-serif;
			  text-decoration: none;
			}
			abbr span {
			  -webkit-text-decoration: underline white;
			          text-decoration: underline white;
			  transition: all 0.5s ease-in-out;
			}
			abbr span.hidden {
			  max-width: 0;
			  text-decoration: none;
			  opacity: 0;
			}
			abbr:hover span {
			  max-width: 2em;
			  text-decoration: none;
			  opacity: 1;
			}
			abbr:hover span.initial {
			  margin-left: 0.5em;
			}
		</style>
	</head>
	<body>
		<abbr data-title="Animation Comics Games">ACG</abbr>
	</body>
</html>
<script>
	"use strict";
	let abbr = document.querySelector("abbr");
	abbr.textContent = "";
	let title = abbr.dataset.title;
	let words = title.split(" ");
	words.forEach(word => {
	    let [initial, ...restLetters] = word.split("");
	    let initialSpan = document.createElement("span");
	    initialSpan.textContent = initial;
	    initialSpan.className = "initial";
	    abbr.append(initialSpan);
	    restLetters.forEach(letter => {
	        let hiddenSpan = document.createElement("span");
	        hiddenSpan.textContent = letter;
	        hiddenSpan.className = "hidden";
	        abbr.append(hiddenSpan);
	    });
	});

</script>